<template>
    <div class="app-container">

        <div class="card-wrap flex-column justify-end card-padding">

            <el-tabs v-model="activeName">
                <el-tab-pane label="GPS在线监控信息" name="first">

                    <el-descriptions title="基本信息"></el-descriptions>
                    <div class="basic">
                        <CarBaseInfo :form="form"></CarBaseInfo>
                    </div>

<!--                    <el-descriptions title="车辆信息">-->
<!--                        <el-descriptions-item label="车架号">-->
<!--                            {{ form.collectUnit|filterNull }}-->
<!--                        </el-descriptions-item>-->
<!--                        <el-descriptions-item label="车牌号">-->
<!--                            {{ form.violationTime|filterNull }}-->
<!--                        </el-descriptions-item>-->
<!--                        <el-descriptions-item label="品牌/车型/车款">-->
<!--                            {{ form.violationEvent|filterNull }}-->
<!--                        </el-descriptions-item>-->
<!--                        <el-descriptions-item label="车辆产权公司">-->
<!--                            {{ form.penaltyPrice|filterNull }}-->
<!--                        </el-descriptions-item>-->
<!--                        <el-descriptions-item label="车辆归属公司">-->
<!--                            {{ form.penaltyScore|filterNull }}-->
<!--                        </el-descriptions-item>-->
<!--                        <el-descriptions-item label="车辆运营城市">{{ form.violationAddress|filterNull }}-->
<!--                        </el-descriptions-item>-->
<!--                        <el-descriptions-item label="车辆大区、城市">-->
<!--                            <dict-tag-->
<!--                                :options="dict.type.deduction_type"-->
<!--                                :value="form.deductionType"/>-->
<!--                        </el-descriptions-item>-->
<!--                        <el-descriptions-item label="合同禀议编号">-->
<!--                            <dict-tag-->
<!--                                :options="dict.type.illegal_process_status"-->
<!--                                :value="form.handleStatus"/>-->
<!--                        </el-descriptions-item>-->
<!--                        <el-descriptions-item label="合同开始日期">{{ form.violationRemark|filterNull }}-->
<!--                        </el-descriptions-item>-->
<!--                        <el-descriptions-item label="合同结束日期">{{ form.violationRemark|filterNull }}-->
<!--                        </el-descriptions-item>-->
<!--                        <el-descriptions-item label="客户名称">{{ form.violationRemark|filterNull }}-->
<!--                        </el-descriptions-item>-->
<!--                        <el-descriptions-item label="采购禀议编号">{{ form.violationRemark|filterNull }}-->
<!--                        </el-descriptions-item>-->
<!--                        <el-descriptions-item label="产品类型">{{ form.violationRemark|filterNull }}-->
<!--                        </el-descriptions-item>-->
<!--                        <el-descriptions-item label="车辆状态">{{ form.violationRemark|filterNull }}-->
<!--                        </el-descriptions-item>-->
<!--                    </el-descriptions>-->

                    <el-descriptions title="GPS在线监控信息">
                        <el-descriptions-item label="GPS品牌">
                            {{ form.gpsBrand|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="设备编号">
                            {{ form.equipmentNo|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="设备类型">
                            <dict-tag
                                :options="dict.type.gps_device_type"
                                :value="form.equipmentType"/>
                        </el-descriptions-item>
                        <el-descriptions-item label="合同签订公里">
                            {{ form.contractSignKm|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="车辆初始公里数">
                            {{ form.initialKm|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="实时公里数">{{ form.realTimeKm|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="GPS状态">
                            <dict-tag
                                :options="dict.type.gps_state"
                                :value="form.gpsState"/>
                        </el-descriptions-item>
                        <el-descriptions-item label="状态持续时长">
                            {{ form.dismantleTime|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="离线设备">
                          {{'0'===form.offLineEquipment?'有线':'1'===form.offLineEquipment?'无线':'2'===form.offLineEquipment?'有线+无线':'--'}}
                        </el-descriptions-item>
                        <el-descriptions-item label="双离是否超过7天">
                            {{ 0==form.isDoubleOffLine?'否':1==form.isDoubleOffLine?'是':'--' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="离线原因">{{ form.offLineCause|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="是否报警">
                            {{ 0==form.isAlarm?'否':1==form.isAlarm?'是':'--' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="报警类型">
                            <dict-tag
                                :options="dict.type.gps_alarm_type"
                                :value="form.alarmType"/>
                        </el-descriptions-item>
                        <el-descriptions-item label="报警时间">{{ form.alarmTime|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="最终定位地址">{{ form.finalLocatorAddress|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="设备报装地点">{{ form.equipmentInstallAddress|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="是否已设置电子围栏">
                            {{ 0==form.isSettingsRail?'否':1==form.isSettingsRail?'是':'未提供' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="围栏设定地点">{{ form.settingsRailAddress|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="围栏设定城市">{{ form.settingsRailCity|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="围栏是否跨省">
                            {{ 0==form.isRailTransProvincial?'否':1==form.isRailTransProvincial?'是':'--' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="跨区时间">{{ form.latestWarningTime|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="是否出围栏">
                            {{ 0==form.isOutRail?'否':1==form.isOutRail?'是':'--' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="出围栏地点据围栏地距离">{{ form.outRailAddressDistance|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="出围栏地点">{{ form.outRailAddress|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="出围栏城市">{{ form.outRailCity|filterNull }}
                        </el-descriptions-item>
                    </el-descriptions>


                </el-tab-pane>
                <el-tab-pane label="告警记录" name="second">
                    <el-table
                        border
                        :data="recordList"
                        style="width: 100%">
                        <el-table-column
                            type="index" label="序号" align="center"
                            width="50">
                        </el-table-column>
                        <el-table-column
                            prop="name" align="center"
                            label="操作">
                            <template v-slot="{row}">
                                <e-button size="mini" type="text" @click="goDetail(row)">查看
                                </e-button>
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="90"
                                         prop="gpsState" align="center"
                                         label="GPS状态">
                            <template v-slot="{row}">
                                <dict-tag
                                    :options="dict.type.gps_state"
                                    :value="row.gpsState"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="130"
                            prop="dismantleTime" align="center"
                            label="状态持续时长">
                            <template v-slot="{row}">
                                {{ row.dismantleTime|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="80"
                            prop="offLineEquipment" align="center"
                            label="离线设备">
                            <template v-slot="{row}">
                              {{'0'===row.offLineEquipment?'有线':'1'===row.offLineEquipment?'无线':'2'===row.offLineEquipment?'有线+无线':'--'}}
<!--                                {{ 0==row.offLineEquipment?'否':1==row.offLineEquipment?'是':2==row.offLineEquipment?'有线+无线':'&#45;&#45;' }}-->
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="80"
                            prop="offLineCause" align="center"
                            label="离线原因">
                            <template v-slot="{row}">
                                {{ row.offLineCause|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="isAlarm" align="center"
                            label="是否报警">
                            <template v-slot="{row}">
                                {{ 0==row.isAlarm?'否':1==row.isAlarm?'是':'--' }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            show-overflow-tooltip min-width="90"
                             prop="alarmType" align="center"
                             label="报警类型">
                            <template v-slot="{row}">
                                <dict-tag
                                    :options="dict.type.gps_alarm_type"
                                    :value="row.alarmType"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="alarmTime" align="center"
                            label="报警时间">
                            <template v-slot="{row}">
                                {{ row.alarmTime|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="130"
                            prop="finalLocatorAddress" align="center"
                            label="最终定位地址">
                            <template v-slot="{row}">
                                {{ row.finalLocatorAddress|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="130"
                            prop="equipmentInstallAddress" align="center"
                            label="设备报装地点">
                            <template v-slot="{row}">
                                {{ row.equipmentInstallAddress|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="160"
                            prop="isSettingsRail" align="center"
                            label="是否已设置电子围栏">
                            <template v-slot="{row}">
                                {{ 0==row.isSettingsRail?'否':1==row.isSettingsRail?'是':'--' }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="100"
                            prop="settingsRailAddress" align="center"
                            label="围栏设定地点">
                            <template v-slot="{row}">
                                {{ row.settingsRailAddress|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="100"
                            prop="settingsRailCity" align="center"
                            label="围栏设定城市">
                            <template v-slot="{row}">
                                {{ row.settingsRailCity|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="100"
                            prop="isRailTransProvincial" align="center"
                            label="围栏是否跨省">
                            <template v-slot="{row}">
                                {{ 0==row.isRailTransProvincial?'否':1==row.isRailTransProvincial?'是':'未提供' }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="80"
                            prop="latestWarningTime" align="center"
                            label="跨区时间">
                            <template v-slot="{row}">
                                {{ row.latestWarningTime|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="100"
                            prop="isOutRail" align="center"
                            label="是否出围栏">
                            <template v-slot="{row}">
                                {{ 0==row.isOutRail?'否':1==row.isOutRail?'是':'--' }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="180"
                            prop="outRailAddressDistance" align="center"
                            label="出围栏地点据围栏地距离">
                            <template v-slot="{row}">
                                {{ row.outRailAddressDistance|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="115"
                            prop="outRailAddress" align="center"
                            label="出围栏地点">
                            <template v-slot="{row}">
                                {{ row.outRailAddress|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="115"
                            prop="outRailCity" align="center"
                            label="出围栏城市">
                            <template v-slot="{row}">
                                {{ row.outRailCity|filterNull }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>

        </div>


        <div class="card-wrap flex-column justify-end card-padding" v-if="'first'==activeName">

            <div class="card-title-wrap">
                <span>GPS排查信息反馈</span>
                <span></span>
            </div>

            <el-form ref="form" :model="form" label-width="80px"
                     label-position="top">

                <el-row :gutter="30">

                    <el-col :span="8">
                        <el-form-item label="反馈原因:" prop="feedbackCause">
<!--                            <el-select v-model="form.feedbackCause" clearable style="width: 100%">-->
<!--                                <template v-for="dict in dict.type.gps_feedback_reason">-->
<!--                                    <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>-->
<!--                                </template>-->
<!--                            </el-select>-->
                            <span><dict-tag
                              :options="dict.type.gps_feedback_reason"
                              :value="form.feedbackCause"
                            /></span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="是否继续排查:" prop="isTroubleshoot"
                                      :rules="{
                                         required: true,
                                         message: '请选择是否继续排查',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.isTroubleshoot, callback)
                                       }">
                            <el-select v-model="form.isTroubleshoot" clearable style="width: 100%">
                                <el-option label="否" :value="'0'" ></el-option>
                                <el-option label="是" :value="'1'" ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="上传照片:" prop="imageOss" style="width: 100%">
                            <ImageCommon
                                :up-type="2" info="选择附件" :limit="9" v-model="form.imageOss"></ImageCommon>
                        </el-form-item>
                    </el-col>

                </el-row>

<!--                <el-row :gutter="30">-->

<!--                    <el-col :span="8">-->
<!--                        <el-form-item label="反馈原因:" prop="customerLabelCode">-->
<!--                            <el-select v-model="form.customerLabelCode" clearable style="width: 100%">-->
<!--                                <template v-for="dict in dict.type.customer_label">-->
<!--                                    <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>-->
<!--                                </template>-->
<!--                            </el-select>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :span="8">-->
<!--                        <el-form-item label="是否继续排:" prop="customerLabelCode">-->
<!--                            <el-select v-model="form.customerLabelCode" clearable style="width: 100%">-->
<!--                                <template v-for="dict in dict.type.customer_label">-->
<!--                                    <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>-->
<!--                                </template>-->
<!--                            </el-select>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->

<!--                    <el-col :span="24">-->
<!--                        <el-form-item label="上传照片:" prop="annex">-->
<!--                            <ImageCommon :up-type="2" info="选择附件" :limit="9" v-model="form.annex"></ImageCommon>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->

<!--                </el-row>-->

            </el-form>


        </div>

        <div v-if="activeName=='first'" class="card-wrap flex justify-end card-padding">
            <el-button @click="cancel">取消</el-button>
            <el-button :loading="buttonLoading" type="primary" @click="submitForm">保存</el-button>
        </div>

    </div>
</template>

<script>

import {carGpsMonitoringDetail, carGpsTroubleshoot, getAlarmRecord} from "@/api/gps/gpsList";
import CarBaseInfo from "@/views/GPSManage/components/carBaseInfo.vue";

export default {
    name:"GPSMonitorDetail",
    components: {CarBaseInfo},
    dicts: ['gps_device_type', 'gps_feedback_reason', 'gps_workorder_type', 'quota_rent_type', 'gps_alarm_type', 'gps_state'],
    data() {
        return {
            buttonLoading: false,
            activeName: 'first',
            form: {},
            recordList:[],
        };
    },
    watch:{
        '$route':{
            handler(val){
                console.log('this.$route', this.$route)

                if(val && val.name==this.$options.name){
                    if (this.$route.query && this.$route.query.carId && !this.$route.query.tabClick) {
                        this.getOldData(this.$route.query.carId);
                    }
                }
            },
            immediate:true,
            deep:true
        }
    },
    // mounted() {
    //     this.businessTypeList = businessTypeList
    //
    //     this.getOldData(this.$route.query.carId);
    // },
    methods: {
        getOldData(id) {
            carGpsMonitoringDetail(id).then(res => {
                this.form = res.data
            })
            getAlarmRecord(id).then(res => {
                this.recordList = res.data
            })
        },
        goDetail(row){

            this.getOldData(row.carId);
            this.activeName = 'first'

            // this.$router.push({
            //     name: 'IllegalListDetail',
            //     query: {carViolationId: row.carViolationId}
            // })
        },
        validData(rule, value, callback) {
            // console.log('aaa', rule, value, callback)
            if (rule.required && !value) {
                // this.$modal.msgError(`未填写${value}`);
                callback(new Error(rule.message));
            } else {
                callback();
            }
        },
        cancel(){
            this.$router.back();
            this.$store.dispatch('tagsView/delView', this.$route);
        },
        submitForm(){
            let that = this
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.buttonLoading = true;

                    carGpsTroubleshoot(that.form).then(res => {
                        this.loading = false;
                        this.$modal.msgSuccess("提交成功");
                        this.$router.back();
this.$store.dispatch('tagsView/delView', this.$route);
                    }).finally(e => {
                        this.loading = false;
                    })

                }
            });
        },
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

::v-deep .el-form-item {
    margin-bottom: 10px !important;
    width: 70%;
}

::v-deep .el-descriptions__header {
    margin-top: -8px !important;
    margin-bottom: 10px !important;
}

::v-deep .el-table{
    margin-bottom: 20px !important;
}

::v-deep .el-tabs__item {
    font-size: 16px !important;
    //color: #333333;
    font-weight: bold;
}

.basic{
    margin: -15px 0 0;
    ::v-deep .el-descriptions-item__cell {
        padding: 7px 0 !important;
    }
}


</style>
